<template>
  <div class="library-config-container">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rulesType"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="联系电话" prop="phone" style="max-width: 400px;width: 100%">
        <el-input v-model="ruleForm.phone">
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          修改
        </el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import $api from '@/api/config'
import {ElNotification} from "element-plus";

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  phone: '',
})

const saveLoading = ref(false)
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (saveLoading.value) {
        return
      }
      saveLoading.value = true
      $api.setConfig(ruleForm).then(res => {
        saveLoading.value = false
        ElNotification({
          title: '成功',
          message: '修改成功！',
          type: 'success',
        })
      }).catch(() => {
        saveLoading.value = false
      })
    } else {

    }
  })
}

onMounted(() => {
  $api.fetchConfig().then(res => {
    ruleForm.phone = res.phone
  })
})

const rulesType = reactive<FormRules>({})
</script>

<style scoped lang="scss">
.library-config-container {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>